<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />	
		<link type="text/css" href="css/smoothness/jquery.ui.theme.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#draggable").draggable({ containment: "#contentcanvas", drag: updateLocation, stop: updateLocation });
				$("#draggable").resizable({ containment: "#contentcanvas", resize: updateSize, stop: updateSize });
			});

			function updateLocation(event,ui)
			{
				$("#location").html("X: " + $("#draggable").css("left") + " Y: " + $("#draggable").css("top"));
			}

			function updateSize(event,ui)
			{
				$("#dimension").html("height: " + $("#draggable").css("height") + " width: " + $("#draggable").css("width"));
			}
		</script>
		<style>
			#draggable { font-family: Georgia; width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 10px; }
			#contentcanvas { height: 510px; width: 960px; float: left; margin: 10px; }
			#console { height: 330px; width: 240px; margin: 10px; float: right; }
			#console p { margin: 10px; }
		</style>	
	</head>
	<body style="font-family: Georgia; font-size: 11pt">
		<div id="contentcanvas" class="ui-widget-content ui-corner-all">
		<div id="draggable" class="ui-widget-content ui-widget-overlay ui-corner-all">Canvas ItemObject</div>
		</div>
		<div id="console" class="ui-widget-content ui-corner-all">
			<p id="dimension"></p>
			<p id="location"></p>
		</div>
	</body>
</html>


